<script src="../../lib/jquery-1.7.1.js"></script>
<script src="../../src/scrollable/scrollable.js"></script>
<script src="../../src/scrollable/scrollable.autoscroll.js"></script>

<link rel="stylesheet" type="text/css" href="style.css"/>

<script>
$(function() {
	$(".scrollable").scrollable({
		circular: true,
		
		onSeek: function() {
			// console.info(this.getIndex());
		}
		
	}).autoscroll({autoplay: true, interval: 1000}); 	
	
	window.api = $(".scrollable").data("scrollable");
});
</script>


<div>
	
	<a class="prev">prev</a>
	
	<div class="navi"></div>
	
	<div class="scrollable" style="width:130px">
		
		<div class="items">
			<div>0</div>  
			<div>1</div>  
			<div>2</div>  
			<div>3</div>  
			<div>4</div>
			<div>5</div>  
			<div>6</div>  
		</div>
		
	</div> 
	
	<a class="next">next</a>
	
</div>

<p>
  <button onclick='api.stop();'>stop</button>
	<button onclick='api.pause();'>pause</button>
	<button onclick='api.play();'>play</button>
</p>

